<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>短信验证登录</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .login_container{
            width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            overflow: hidden;
        }
        .login_cont_box{
            margin: 100px;
        }
        .login_header{
            overflow: hidden;
            padding: 20px 0;
            border-bottom: 2px solid #999;
        }
        .logo{
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 30px;
            background-color: #ccc;
        }
        .logo img{
            width: 100%;
            height: 100%;
        }
        .logo_title{
            height: 40px;
            float: left;
            margin-top: 60px;
            margin-right: 20px;
            overflow: hidden;
        }
        .logo_title_cha{
            height: 20px;
            line-height: 20px;
            font-size: 16px;
        }
        .logo_title_en{
            height: 20px;
            line-height: 20px;
            font-size: 16px;
        }
        .page_title{
            height: 40px;
            float: left;
            margin-top: 60px;
            margin-right: 20px;
            overflow: hidden;
        }
        .page_title_cha{
            height: 20px;
            line-height: 20px;
            font-size: 14px;
        }
        .page_title_en{
            height: 20px;
            line-height: 20px;
            font-size: 16px;
        }
        .login_form_content{
            padding: 60px 100px;
            overflow: hidden;
        }
        .login_form_left{
            width: 500px;
            overflow: hidden;
            margin: 0 auto;
            border:  1px solid #999;
        }
        .login_title_box{
            height: 40px;
            padding: 10px;
            background-color: #ccc;
        }
        .my_title_cha{
            height: 20px;
            line-height: 20px;
            text-align: center;
        }
        .my_title_en{
            height: 20px;
            line-height: 20px;
            text-align: center;
        }
        .my_fontsize_12{
            font-size: 12px;
        }
        .my_fontsize_14{
            font-size: 14px
        }
        .login_form_box{
            width: calc(100% - 60px);
            padding: 20px 30px;
            background-color: #fff;
            overflow: hidden;
        }
        .input_box{
            width: 100%;
        }
        .input_cont_box{
            position: relative;
        }
        .input_title{
            padding: 5px;
            position: absolute;
            overflow: hidden;
            top: 0px;
            z-index: 99;
        }
        .input_title_cha{
            color: #888;
            height: 20px;
            line-height: 20px;
        }
        .input_title_en{
            color: #888;
            height: 20px;
            line-height: 20px;
        }
        .input_sty{
            position: relative;
            width: calc(100% - 10px);
            height: 40px;
            line-height: 40px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .get_code_btn{
            padding: 5px;
            width: calc(100% - 282px);
            height: 40px;
            background-color: #ccc;
            overflow: hidden;
            border-radius: 3px;
            cursor: pointer;
        }
        .input_code{
            position: relative;
            float: left;
            width: 240px;
            height: 40px;
            line-height: 40px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-right: 20px;
        }
        .my_mar_bottom{
            margin-bottom: 20px;
        }
        .forget_password_title a{
            color: #2e6da4;
        }
        .my_submit_btn{
            margin: 30px 0 20px 0;
            width: 100%;
            border: 1px solid #999;
            border-radius: 3px;
            background-color: #999;
            cursor: pointer;
        }
        .login_tag_box{
            margin-bottom: 20px;
            width: 100%;
            overflow: hidden;
        }
        .change_login{
            float: left;
            font-size: 14px;
        }
        .to_reg{
            float: right;
            font-size: 14px;
        }
        .change_login a,.to_reg a{
            color: #888;
        }

    </style>
</head>
<body>
<div class="login_container">
    <div class="login_cont_box">
        <div class="login_header">
            <div class="logo">
                <img src="../image/Logo.png" alt="">
            </div>
            <div class="logo_title">
                <div class="logo_title_cha">小货郎</div>
                <div class="logo_title_en">Small shopper</div>
            </div>
            <div class="page_title">
                <div class="page_title_cha">登录</div>
                <div class="page_title_en">login</div>
            </div>
        </div>
        <div class="login_form_content">
            <div class="login_form_left">
                <div class="login_title_box">
                    <div class="my_title_cha my_fontsize_14">短信登录</div>
                    <div class="my_title_en my_fontsize_14">SMS login</div>
                </div>
                <form action="">
                    <div class="login_form_box">
                        <div class="input_box">
                            <div class="input_cont_box my_mar_bottom">
                                <input type="text" class="input_sty">
                                <div class="input_title">
                                    <div class="input_title_cha my_fontsize_12">手机号</div>
                                    <div class="input_title_en my_fontsize_12">phone number</div>
                                </div>
                            </div>
                            <div class="input_cont_box reg_mar_bottom">
                                <input type="text" class="input_code">
                                <div class="input_title">
                                    <div class="input_title_cha my_fontsize_12">验证码</div>
                                    <div class="input_title_en my_fontsize_12">verification code</div>
                                </div>
                            </div>
                            <div class="get_code_btn my_mar_bottom">
                                <div class="my_title_cha my_fontsize_12">获取验证码</div>
                                <div class="my_title_en my_fontsize_12">get verification code</div>
                            </div>

                            <button class="my_submit_btn">
                                <div class="my_title_cha my_fontsize_12">登录</div>
                                <div class="my_title_en my_fontsize_12">landing</div>
                            </button>
                            <div class="login_tag_box my_mar_bottom">
                                <div class="change_login"><a href="">密码登录/Password login</a></div>
                                <div class="to_reg"><a href="">注册/register</a></div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    $(".input_cont_box").click(function () {
        $(this).find(".input_title").hide();
        $(this).find("input").focus();
    });
    $("input[type = 'text']").focus(function () {
        $(this).next().hide();
    });
    $("input[type = 'password']").focus(function () {
        $(this).next().hide();
    });
    $("input[type = 'text']").blur(function () {
        if($(this).val() == ""){
            $(this).next().show();
        }else {
            $(this).next().hide();
        }
    });
    $("input[type = 'password']").blur(function () {
        if($(this).val() == ""){
            $(this).next().show();
        }else {
            $(this).next().hide();
        }
    })
</script>
</html>